<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>发布招标信息</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center bidding_post inner_page">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        <a href="index.html" class="home"></a>
        发布招标信息
    </header>

    <section class="main">
       <div class="container">

           <form action="" class="bidding_form container">

               <h2>发布招标</h2>
               <div class="error_message"></div>
               <ul>
                   <li>
                       <span>招标主题：</span>
                       <input type="text" placeholder="请填写招标主题" name="theme" id="theme" onblur="checkEmpty(this,'招标主题不能为空')">
                   </li>
                   <li>
                       <span>招标类别：</span>
                       <select name="" id="">
                           <option value="">请选择招标类别</option>
                       </select>
                   </li>
                   <li>
                       <span>服务区域：</span>
                       <select name="province" id="s_province">
                           <option value="">选择服务区域</option>
                       </select>
                   </li>
                   <li>
                       <span>您的姓名：</span>
                       <input type="text" placeholder="您的名字" name="name" id="name" onblur="checkEmpty(this,'姓名不能为空')">
                   </li>
                   <li>
                       <span>手机号码：</span>
                       <input type="text" placeholder="请填写常用联系方式" name="telephone" id="telephone" onblur="checkTel(this)">
                   </li>
                   <li>
                       <span>项目内容：</span>
                       <textarea name="project" id="project" onblur="checkEmpty(this,'项目内容不能为空')"></textarea>
                   </li>
                  
                   <div class="clear"></div>
               </ul>
               <div class="imgs">
                   <ul id="img_list" class="img_list">
                   </ul>
                   <input type="file" id="upload_img"  onchange="preview(this)">
                   <label for="upload_img"></label>
                   <div class="clear"></div>
               </div>
               <input type="submit" value="立即发布" onclick="checkInfo()">

           </form>

       </div>

    </section>


</body>
<script src="js/jquery.js"></script>
<script src="js/area.js"></script>
<script type="text/javascript">_init_area(["s_province"],['选择服务区域']);</script>
<script>
    var imgCount=-1;
    function preview(file) {
        console.log(imgCount);
        var prevBox = document.getElementById('img_list');
        var elLi=document.createElement("li");

        prevBox.appendChild(elLi);
        var prevItem=prevBox.getElementsByTagName("li");

        if(file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {

                prevItem[imgCount].innerHTML='<i></i><img src="' + evt.target.result + '" />';
                var elI= prevItem[imgCount].getElementsByTagName("i")[0];
                console.log(elI);
                elI.onclick=function(){
                    prevItem[imgCount].parentNode.removeChild(elLi);
                    imgCount--;
                    if(imgCount<4){
                        document.getElementById("upload_img").removeAttribute("disabled");
                    }
                    return;
                }
            }
            reader.readAsDataURL(file.files[0]);
            imgCount++;
        } else {
            prevItem[imgCount].innerHTML = '<i></i><div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            var elI= prevItem[imgCount].getElementsByTagName("i")[0];
            console.log(elI);
            elI.onclick=function(){
                console.log("1111");
                prevItem[imgCount].parentNode.removeChild(elLi);
                imgCount--;
                if(imgCount<4){
                    document.getElementById("upload_img").removeAttribute("disabled");
                }
                return;
            }
            imgCount++;
        }

        if(imgCount==4){
            document.getElementById("upload_img").setAttribute("disabled","disabled");
        }

    }
    /*校验手机号码*/
    function checkTel(obj){
        obj.errorFlag = false;
        if (checkEmpty(obj,'请您填写手机号码')) {
            obj.errorFlag = true;
            return  obj.errorFlag;
        }
        if(!(/^1[3|4|5|7|8]\d{9}$/.test(obj.value))){
            showErrorMessage("输入手机号码不正确");
            obj.errorFlag = true;
        }else{
            clearErrorMessage();
        }
        return  obj.errorFlag;
    }
    /*检测是否为空*/
    function checkEmpty(obj,message){
        if(obj.value==''){
            showErrorMessage(message);
            return true;
        }else{
            clearErrorMessage();
            return false;
        }
    }
    /*检测数据*/
    function checkInfo(){
        var elTheme=document.getElementById("theme");
        var elTel=document.getElementById("telephone");
        var elName=document.getElementById("name");
        var elProject=document.getElementById("project");

        if(checkEmpty(elTheme,"招标主题不能为空")){
            $(".bidding_form").submit(false);
            return;
        }
        if(checkEmpty(elName,"姓名不能为空")){
            $(".bidding_form").submit(false);
            return;
        }

        if(checkTel(elTel)){
            $(".bidding_form").submit(false);
            return;
        }
        /*检测地区*/
        for(var i=0;i< $("#s_province option:checked").length;i++){
            if($("#s_province option:checked").eq(0).index()==0){
                showErrorMessage("请选择服务区域");
                $(".bidding_form").submit(false);
                return;

            }
        }
        if(checkEmpty(elProject,"项目内容不能为空")){
            $(".bidding_form").submit(false);
            return;
        }


    }
    function showErrorMessage(message){
        $(".error_message").html("*"+message);
    }

    function clearErrorMessage() {
        $(".error_message").html("");
    }
</script>
</html>